<div>
  <!-- Accounts Summary Component -->
  <div class="col-lg-3">
    <div class="panel panel-info">
      <div class="panel-heading">
        <button type="button" class="btn btn-default btn-xs pull-right" ng-click="recalculateAllSummaries()">
          <span
            class="glyphicon glyphicon-retweet pull-right disabled">
          </span>Recalculate Scores&nbsp;
        </button>
        <h3 class="panel-title">Accounts</h3>
      </div>
      <div class="panel-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>
                <a ng-if="!selectAll" ng-click="selectAllToggle()" class="pointer">Select All</a>
                <a ng-if="selectAll" ng-click="selectAllToggle()" class="pointer">Clear All</a>
              </th>
              <th ng-click="sortColumn('account', 'name')">
                Account
                <span ng-class="classForColumn('account', 'name')"></span>
              </th>
              <th ng-click="sortColumn('account', 'total_score')">
                Score
                <span ng-class="classForColumn('account', 'total_score')"></span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="account in accounts | orderBy:sort_params.account.sort_value">
              <td><div class="text-center">
                  <input type="checkbox" ng-model="account.selected_for_action"/>
              </div></td>
              <td><a href="#/items/-/-/{{ account.name }}/-/-/-/-/-/-/-/1/25">{{account.name}}</a></td>
              <td>{{account.total_score}}</td>
            </tr>
          </tbody>
        </table>
        <div ng-hide="accountsLoaded">
          <p>Loading . . .</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Technology Summary Component -->
  <div class="col-lg-3">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">Technology Issue Scores</h3>
      </div>
      <div class="panel-body" ng-switch="technologySummaryLoaded">
        <div ng-switch-when="false">
            <p>Loading . . .</p>
        </div>
        <table class="table table-striped" ng-switch-when="true">
          <thead>
            <tr>
              <th ng-click="sortColumn('technology', 'name')">
                Technology
                <span ng-class="classForColumn('technology', 'name')"></span>
              </th>
              <th ng-click="sortColumn('technology', 'score')">
                Score
                <span ng-class="classForColumn('technology', 'score')"></span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="tech in technologies | orderBy:sort_params.technology.sort_value">
              <td><a href="#/issues/-/{{tech.name}}/{{getAccountFilter()}}/-/-/-/True/-/-/-/1/25">{{tech.name}}</a></td>
              <td>{{tech.score}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <!-- High Score Component -->
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">High Score Items</h3>
      </div>
      <div class="panel-body" ng-switch="highScoreSummaryLoaded">
        <div ng-switch-when="false">
            <p>Loading . . .</p>
        </div>
        <table class="table table-striped" ng-switch-when="true">
          <thead>
            <tr>
              <th>Account</th>
              <th>Technology</th>
              <th>Name</th>
              <th>Score</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="highScoreItem in selectedItems | orderBy:'-unjustifiedScore()' | limitTo:10">
              <td>{{highScoreItem.account}}</td>
              <td>{{highScoreItem.technology}}</td>
              <td><a href="#/viewitem/{{highScoreItem.id}}">{{highScoreItem.name}}</a></td>
              <td>{{highScoreItem.unjustifiedScore()}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- Aging Issue Component -->
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">Aging Issues</h3>
      </div>
      <div class="panel-body" ng-switch="agingIssueSummaryLoaded">
        <div ng-switch-when="false">
            <p>Loading . . .</p>
        </div>
        <table class="table table-striped" ng-switch-when="true">
          <thead>
            <tr>
              <th>Account</th>
              <th>Technology</th>
              <th>Item Name</th>
              <th>Issue</th>
              <th>Score</th>
              <th>Issue Date</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="agingIssue in agingIssues">
              <td>{{agingIssue.item.account}}</td>
              <td>{{agingIssue.item.technology}}</td>
              <td><a href="#/viewitem/{{agingIssue.item_id}}">{{agingIssue.item.name}}</a></td>
              <td>{{agingIssue.issue}}</td>
              <td>{{agingIssue.score}}</td>
              <td>{{agingIssue.justified_date | date:'short'}}</td>
              <td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
